<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.imgbox {
	position: relative;
	margin-left: 50px;
	float: left;
}

.probox {
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}

.probox img {
	width: 300px;
	height: 300px;
	vertical-align: top;
}

.showbox {
	display: none;
	position: absolute;
	left: 403px;
	top: 0;
	width: 400px;
	height: 300px;
	overflow: hidden;
	border: 1px solid #ccc;
}

.showbox img {
	position: absolute;
	height: 1200px;
	width: 1200px;
}

.hoverbox {
	display: none;
	position: absolute;
	top: 0;
	background: #09f;
	border: 1px solid #09f;
	height: 75px;
	width: 100px;
	cursor: move;
	z-index: 10;
}

.message {
	float: left;
	width: 50%;
	height: 400px;
	margin-left: 30px;
	
}

#s{
	color: red;
	font-size: 24px;
	font-weight: bold;
}
#t_d,#t_h,#t_m,#t_s{
	font-size:14px;
	color:#990000;
}
.btn{
	border:none;
	width:120px;
	height:40px;
	background-color:red;
	color:white;
	font-size:20px;

}
</style>
<script>

function daojishi(){  
	var a= new Date('2017/05/1 10:00:00'); //截止时间  
	var b = new Date();  
	var t =a.getTime() - b.getTime();   
	var d=Math.floor(t/1000/60/60/24);  
	var h=Math.floor(t/1000/60/60%24);  
	var m=Math.floor(t/1000/60%60);  
	var s=Math.floor(t/1000%60);  
	document.getElementById("t_d").innerHTML = d + "天";  
	document.getElementById("t_h").innerHTML = h + "时";  
	document.getElementById("t_m").innerHTML = m + "分";  
	document.getElementById("t_s").innerHTML = s + "秒";  
}  
	setInterval(daojishi,1000);  

	function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) {
		var moveX = x - l - (h_w / 2);
		//鼠标区域距离
		var moveY = y - t - (h_h / 2);
		//鼠标区域距离
		if (moveX < 0) {
			moveX = 0
		}
		if (moveY < 0) {
			moveY = 0
		}
		if (moveX > imgbox.width() - h_w) {
			moveX = imgbox.width() - h_w
		}
		if (moveY > imgbox.height() - h_h) {
			moveY = imgbox.height() - h_h
		}
		//判断鼠标使其不跑出图片框
		var zoomX = showbox.width() / imgbox.width()
		//求图片比例
		var zoomY = showbox.height() / imgbox.height()

		showbox.css({
			left : -(moveX * zoomX),
			top : -(moveY * zoomY)
		})
		hoverbox.css({
			left : moveX,
			top : moveY
		})
		//确定位置

	}

	function Zoomhover(imgbox, hoverbox, showbox) {
		var l = imgbox.offset().left;
		var t = imgbox.offset().top;
		var w = hoverbox.width();
		var h = hoverbox.height();
		var time;
		$(".probox img,.hoverbox").mouseover(function(e) {
			var x = e.pageX;
			var y = e.pageY;
			$(".hoverbox,.showbox").show();
			hoverbox.css("opacity", "0.3")
			time = setTimeout(function() {
				Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)
			}, 1)
		}).mousemove(function(e) {
			var x = e.pageX;
			var y = e.pageY;
			time = setTimeout(function() {
				Zoom(imgbox, hoverbox, l, t, x, y, w, h, showbox)
			}, 1)
		}).mouseout(function() {
			showbox.parent().hide()
			hoverbox.hide();
		})
	}
	$(function() {
		Zoomhover($(".probox img"), $(".hoverbox"), $(".showbox img"));
	});
</script>
</head>
<body>
	<div>
		<iframe src="header.jsp" width="100%" height="200px" frameborder="0"
			scrolling="no"></iframe>
	</div>

	<hr color=#e6e6e6 style="width: 100%; box-shadow: -8px 0 8px #e6e6e6;">



	<div class="imgbox">
		<div class="probox">
			<img src="image/langqin.jpg" />
			<div class="hoverbox"></div>
		</div>
		<div class="showbox">
			<img src="image/langqin.jpg" />
		</div>
	</div>

	<div class="message">
		<h3>浪琴(Longines)手表 名匠系列机械女表L2.128.5.79.7</h3>
			本店售价：<span id="s">￥8940元</span><br/><br/>	
			商品货号：product001<br/><br/>
			商品品牌：浪琴<br/><br/>
			商品介绍：名匠系列机械情侣表男表<br/><br/>
		<hr style="width:98%;" color="grey">
			促销价：<span id="s">￥1100元</span><br/><br/>	
			剩余时间：<span id="t_d">00天</span>  
				   <span id="t_h">00时</span>  
				   <span id="t_m">00分</span>  
				   <span id="t_s">00秒</span> <br/><br/>
			购买此商品可使用：<span id="t_d">100积分</span><br/><br/>
		
		<input type="sbmit" class="btn" value=" ￥  立即购买">
	</div>


	<div>
		<iframe src="foot.jsp" width="100%" height="350px" frameborder="0"
			scrolling="no"></iframe>
	</div>

</body>
</html>